<template>
	<view>
		<view class="couponWrapper">
			<!-- 优惠券 -->
			<view class="couponInner">
				<view class="example-body">
					<view class="tag-view" v-for="o in couponList"
						style="float: left; margin-right: 3px; margin-bottom: 20px;">
						<uni-tag :text="o.name" type="warning" size="default" @click="getCoupon(o.id)" />
					</view>
				</view>
			</view>
			<view>
				<!-- 购物车中商品 -->
				<view class="uni-container">
					<uni-table ref="table" border stripe type="selection" emptyText="暂无更多数据"
						@selection-change="selectionChange">
						<uni-tr>
							<uni-th align="center" style="width: 280px;">商品</uni-th>
							<uni-th align="center">购买数量</uni-th>
							<!-- <uni-th align="center">地址</uni-th> -->
							<!-- <uni-th width="204" align="center">设置</uni-th> -->
						</uni-tr>
						<uni-tr v-for="item in shoppingCartList" :key="item.id">
							<uni-td>
								<view>
									<image :src="item.imgSrc" mode="aspectFill"
										style="width: 120rpx; height: 120rpx; border-radius: 50%; float: left;"></image>
								</view>
								<view>
									<view style="text-align: center;">
										{{item.title}}&nbsp;|&nbsp;{{item.weight}}{{item.chn}}
									</view>
									<view style="text-align: center;">￥{{item.price}}</view>
								</view>
							</uni-td>

							<uni-td>
								<view class="uni-group">
									<uni-number-box @click.native='updatePrice' :min="1" :max="10"
										v-model="item.buyNum" />
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>
					<!-- <view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize"
							:current="pageCurrent" :total="total" @change="change" /></view> -->
				</view>
			</view>

			<view class="placeOrderWrapper" style="z-index: 99;">
				<!-- 下单按钮 -->
				<view class="placeOrder">
					<view style="font-size: 40rpx; float: left; margin-left: 200rpx; line-height: 60px;">
						合计:￥{{totalPrice}}</view>
					<uni-icons class="btn" @click="submitOrder" type="paperplane-filled" size="25"
						style="color: aliceblue; border-radius: 40rpx; float: right; margin-right: 14px; line-height: 60px; ">去结算</uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onTabItemTap: function(e) {
			// console.log(e);
			if (e.index == 2) {
				this.selCurrentUserShpoppingCart();
				this.selAllCoupon();
			}
			// e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
		},
		onLoad() {
			this.selCurrentUserShpoppingCart();
			this.selAllCoupon();
		},
		data() {
			return {
				shoppingCartList: [],
				totalPrice: 0,
				selectedList: [],
				couponList: []
			};
		},
		methods: {
			getCoupon(id) { // 领取优惠卷
				let jwt = uni.getStorageSync('authority');
				// console.log(id);
				uni.request({
					url: "api/appuser/userGetCoupon",
					method: 'GET',
					header: {
						"authority": jwt
					},
					data: {
						couponId: id
					},
					success: (res) => {
						// console.log(res);
						if (res.data.code == 200) {
							uni.showToast({
								title: "领取成功",
								icon: 'success'
							})
						} else if (res.data.code == 3002) {
							uni.showToast({
								title: "您已经领取过啦",
								icon: 'error'
							})
						} else if (res.data.code == 10010) {
							uni.showToast({
								title: "优惠卷被领光啦",
								icon: 'error'
							})
						} else if (res.data.code == 3001) {
							uni.showToast({
								title: "优惠卷过期了🫡",
								icon: 'error'
							})
						}
					}
				})
			},
			selAllCoupon() { // 优惠券查询
				let jwt = uni.getStorageSync('authority');
				uni.request({
					url: 'api/appuser/selAllCoupon',
					method: 'GET',
					header: {
						"authority": jwt
					},
					success: (res) => {
						// console.log(res);
						if (res.data.code == 200) {
							this.couponList = res.data.data;
						}
					}
				})
			},
			updatePrice() {
				this.totalPrice = 0;
				this.selectedList.forEach(e => {
					this.totalPrice += e.buyNum * e.price;
				})
			},
			selCurrentUserShpoppingCart() { // 当前用户的购物车
				let jwt = uni.getStorageSync('authority');
				uni.request({
					url: 'api/appuser/selUserShoppingCart',
					method: 'GET',
					header: {
						"authority": jwt
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							this.shoppingCartList = res.data.data;
						}
					}
				})
			},
			selectionChange(e) { // 所选中的商品
				this.selectedList = [] // 选择的行数据
				let selectedIndexs = [] // 选择的下标数组
				selectedIndexs = e.detail.index
				// 将数组中的值，作为table表格数组的下标来获取对应的当前行数据
				selectedIndexs.map(i => {
					this.selectedList.push(this.shoppingCartList[i])
				})
				// console.log('选中的当前行数据', this.selectedList)
				this.totalPrice = 0;
				this.selectedList.forEach(e => {
					this.totalPrice += e.buyNum * e.price;
				})
			},
			submitOrder() {
				if (this.selectedList.length == 0) {
					uni.showToast({
						icon: 'error',
						title: "请选择要购买的商品"
					})
					return;
				}

				let item = JSON.stringify(this.selectedList);
				uni.setStorageSync('selectedList', item);

				uni.navigateTo({
					url: "/pages/submitOrder/submitOrder"
				})
			}
		}
	}
</script>

<style lang="scss">
	.couponWrapper {
		width: 100%;
		height: 60rpx;
		margin-top: 20rpx;
		// border: 1px solid red;

		.tag-view {
			margin-left: 10rpx;
		}
	}

	.placeOrderWrapper {
		width: 750rpx;
		height: 60px;
		background-color: #e94b64;
		position: fixed;
		bottom: 100rpx;
		border-radius: 40rpx;
	}
</style>